<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试页面</title>
<script language="javascript" type="text/javascript" src="mootools-core-1.3-full-compat.js"></script>
<script language="javascript" type="text/javascript" src="mootools-more.js"></script>
<script language="javascript" type="text/javascript" src="mooGrid.js"></script>
<style>
.mooGrid{
	position: relative;
	font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	border:none;
	overflow:hidden; /* za debug iskljuci */
	color: #000;
}
.mooGrid div.hDiv{
	height:24px;
	line-height:24px;
	white-space:nowrap;
	overflow:hidden; /* za debug iskljuci */
}
.mooGrid div.hDiv div.th{
	line-height:24px;
}
.mooGrid div.bDiv .td{
	line-height:24px;	
}
.mooGrid div.bDiv{/* body div */
	position: relative;
	background: #fff;
	overflow: auto;
}
.mooGrid div.bDiv ul{
	margin:0;
	padding:0;
	overflow:hidden;
}

.mooGrid div.bDiv ul li{
	margin:0;
	padding:0;
	list-style:none;
	overflow:hidden;
}
.mooGrid div.hDiv .th,
.mooGrid  div.bDiv .td {/* common cell properties*/
	float:left;
	text-align: left;
	border-right: 1px solid #ddd;
	border-left: 1px solid #fff;
	vertical-align: top !important;
	display:inline-block;
	white-space:nowrap;
	overflow:hidden;
	/*
	padding-top:0;
	padding-bottom:0;*/
	padding-left:5px;
	/*-moz-user-select:none;*/ /* utjece na inline edit, input */
	cursor:pointer;
}
.mooGrid div.hDiv .th{
	border-bottom: 1px solid #000;
}
.mooGrid ::selection{
	color:none;
	background-color:transparent;
}
.mooGrid div.hDiv div.th{
	line-height:24px;
}
.mooGrid div.bDiv .td{
	line-height:24px;	
	/*background-color:red;*/
}
.mooGrid div.bDiv ul{
	margin:0;
	padding:0;
	overflow:hidden;
}
.mooGrid div.bDiv ul li{
	margin:0;
	padding:0;
	list-style:none;
	overflow:hidden;
	border-bottom:1px dotted #000;
}
.mooGrid li.erow{ /* alt rows */
	background-color: #f7f7f7;
	/*border-bottom: 1px solid #f7f7f7;*/
}

.mooGrid li.selected {
	background-color: #d9e6f4  !important;
	/*color: #fff;*/
}

.mooGrid li.over {
	background-color: #eaeff4;
	/*color: #fff;*/
}

.mooGrid div.pDiv{
	border: 1px solid #ccc;
	overflow:hidden;
	white-space: nowrap;
	height:30px;
	line-height:25px;
}
.mooGrid div.pGroup
{
	float: left;
	background: none;
	height: 24px;
	margin: 0px 5px;
}
	
.omnigrid div.pDiv .pStat
{
	position: relative;
	top: 5px;
	overflow: visible;
	font-size:10px;
	color:#777777;
}

.mooGrid .pFirst{
	background: url(omnigrid/first.gif) no-repeat;
	cursor: pointer;
}

.mooGrid .pPrev{
	background: url(omnigrid/prev.gif) no-repeat;
	cursor: pointer;
}

.mooGrid .pNext{
	background: url(omnigrid/next.gif) no-repeat;
	cursor: pointer;
}

.mooGrid .pLast{
	background: url(omnigrid/last.gif) no-repeat;
	cursor: pointer;
}

.mooGrid .pReload{
	background: url(omnigrid/refresh.gif) no-repeat;
	cursor: pointer;
}
.mooGrid .elementloader{
	position:absolute;
	width:16px;
	height:16px;
	background:url(omnigrid1.2.6/omnigrid/load.gif) no-repeat center center;
}
.omnigrid div.bDiv ul li.section{
	display:none;
	border-right: 1px solid #ddd;
	border-bottom: 1px solid #eeeeee;
	border-top: 1px solid #eeeeee;
}
</style>
<script type="text/javascript">
function onGridSelect(evt){
	var str = 'row: '+evt.row+' indices: '+evt.indices;
	str += ' id: '+evt.target.getDataByRow(evt.row).id;
	new Hash(evt.target).each(function(el,k){
		alert(k);
	})
	alert( str );
}
	
function gridButtonClick(button, grid){
	 alert(button);
}
	
var cmu = [
	{
		 header: "ID",
		 dataIndex: 'help_category_id',
		 dataType:'string',
		 width:50,
		 text:'{help_category_id}'
	},
	{
		 header: "Parent ID",
		 dataIndex: 'parent_category_id',
		 dataType:'string',
		 width:50,
		 text:'{parent_category_id}'
	},
	{
		 header: "Name",
		 dataIndex: 'name',
		 dataType:'string',
		 width:400,
		 text:'{name}'
	},
	{
		 header: "修改",
		 dataIndex: 'chk',
		 dataType:'string',
		 width:96,
		 text:'{chk}'
	}
];
window.addEvent("domready", function(){
	datagrid = new mooGrid('mygrid', {
		columnModel  : cmu,
		url          : 'data.php',
		pFirstTitle  : '第一页',
		pPrevTitle   : '上一页',
		pNextTitle   : '下一页',
		pLastTitle   : '最后一页',
		pReloadTitle : '刷新',
		width        :600,
		'onClick'      : function(o){
			alert(o.element.getFirst('div').get('html'));
		}
	});
});
</script>
</head>

<body>
<div id="mygrid" ></div>
</body>
</html>
